<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="年份" prop="orderyear">
        <el-date-picker
          v-model="queryParams.orderyear"
          style="width: 160px"
          type="year"
          value-format="yyyy"
          placeholder="请选择年份"
          clearable
          size="small"
          :picker-options="orderyear"
          @keyup.enter.native="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单名称" prop="ordername">
        <el-input
          v-model="queryParams.ordername"
          style="width: 160px"
          placeholder="请输入订单名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="归属部门" prop="did">
        <el-select
          v-model="queryParams.did"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          placeholder="请选择"
        >
          <el-option
            v-for="item in dnameOptions"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属地区" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入归属地区"
          style="width: 160px"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:order:add']"
          >新增</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:work:export']"
          >导出</el-button
        >
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="orderList"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="订单年份" align="center" prop="orderyear" />
      <el-table-column
        label="归属部门"
        align="center"
        prop="dname"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="成本类型"
        align="center"
        prop="orderCostType"
        :show-overflow-tooltip="true"
        :formatter="costFormat"
      />
      <el-table-column
        label="归属地区"
        align="center"
        prop="address"
        :show-overflow-tooltip="true"
        :formatter="addressFormat"
      />
      <el-table-column
        label="订单号"
        align="center"
        prop="ordercode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单名称"
        align="center"
        prop="ordername"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单类型"
        align="center"
        prop="ordertype"
        :show-overflow-tooltip="true"
        :formatter="typeFormat"
      />
      <el-table-column
        label="订单比例%"
        align="center"
        prop="orderproportion"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="产值目标(元)"
        align="center"
        width="150"
        prop="salestarget"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        width="120"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:order:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:order:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="订单年份" prop="orderyear">
          <el-date-picker
            v-model="form.orderyear"
            style="width: 380px"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归属部门" prop="deptId">
          <el-select
            v-model="form.did"
            placeholder="请选择"
            style="width: 380px"
          >
            <el-option
              v-for="item in dnameOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目经理" prop="userid">
          <el-select
            v-model="form.userid"
            placeholder="请选择"
            style="width: 380px"
          >
            <el-option
              v-for="item in usernameOptions"
              :key="item.employeeId"
              :label="item.fullName"
              :value="item.employeeId"
              :disabled="item.status == 1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="ordersdate">
          <el-date-picker
            :picker-options="pickerOptionsStart"
            clearable
            size="small"
            style="width: 380px"
            v-model="form.ordersdate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择订单开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="orderedate">
          <el-date-picker
            :picker-options="pickerOptionsEnd"
            clearable
            size="small"
            style="width: 380px"
            v-model="form.orderedate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择订单结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <!--<el-form-item label="业务类型">
          <el-select
            v-model="form.businesstype"
            placeholder="请选择业务类型"
            style="width: 380px"
          >
            <el-option label="1" :value="1"></el-option>
            <el-option label="2" :value="2"></el-option>
            <el-option label="3" :value="3"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="审批员" prop="wtrmanagerid">
          <el-select
            v-model="form.wtrmanagerid"
            placeholder="请选择考勤审批员"
            style="width: 380px"
          >
            <el-option
              v-for="item in wtrOptions"
              :key="item.employeeId"
              :label="item.fullName"
              :value="item.employeeId"
              :disabled="item.status == 1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成本类型" prop="orderCostType">
          <el-select
            v-model="form.orderCostType"
            placeholder="请选择业务类型"
            style="width: 380px"
          >
            <el-option
              v-for="item in costOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属地区" prop="address">
          <el-select
            v-model="form.address"
            placeholder="请选择业务类型"
            style="width: 380px"
          >
            <el-option
              v-for="item in addressOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单号" prop="ordercode">
          <!-- :disabled="true" -->
          <el-input v-model="form.ordercode" placeholder="" disabled="" />
        </el-form-item>
        <el-form-item label="订单名称" prop="ordername">
          <el-input
            v-model="form.ordername"
            placeholder="请输入订单名称"
            style="width: 380px"
          />
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select
            v-model="form.orderType"
            placeholder="请选择订单类型"
            style="width: 380px"
          >
            <el-option
              v-for="item in orderOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单比例" prop="orderproportion">
          <el-input
            v-model="form.orderproportion"
            placeholder="请输入订单比例"
            style="width: 380px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="产值目标" prop="salestarget">
          <el-input
            placeholder="请输入产值目标"
            v-model="form.salestarget"
            style="width: 380px"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="isDisable"
          >确定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOrder,
  getOrder,
  delOrder,
  addOrder,
  listDept,
  getOrderCode,
  addEmployee,
  updateOrder,
  exportOrder,
} from "@/api/system/order";

export default {
  name: "Order",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      names: [],
      orderids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //订单类型
      orderOptions: [],
      //成本类型
      costOptions: [],
      //归属地区
      addressOptions: [],
      //部门类别
      dnameOptions: [],
      //项目经理类别
      usernameOptions: [],
      //考勤审批员
      wtrOptions: [],
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      //禁止重复提交
      isDisable: false,
      loadingbut: false, //审核提交加载中
      loadingbuttext: "确定",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderyear: null,
        ordercode: null,
        ordername: null,
        did: null,
        dname: null,
        userid: null,
        deptName: null,
        username: null,
        userid2: null,
        ordertype: null,
        ordersdate: null,
        orderedate: null,
        orderdate: null,
        orderyear: null,
        corpid: null,
        orderstate: null,
        address: null,
        orderCostType: null,
        orderproportion: null,
        salestarget: null,
        businesstype: null,
        customer: null,
        isActive: null,
        wtrmanager: null,
        wtrmanagerid: null,
        orderType: null,
      },
      orderyear: "",
      // 表单参数
      form: {},
      pickerOptionsStart: " ",
      pickerOptionsEnd: " ",
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.orderedate) {
            return time.getTime() >= new Date(this.form.orderedate).getTime();
          }
        },
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.form.ordersdate) {
            return time.getTime() <= new Date(this.form.ordersdate).getTime();
          }
        },
      },
      // 表单校验
      rules: {
        orderyear: [
          { required: true, message: "年份不能为空", trigger: "blur" },
        ],
        // dname: [{ required: true, message: "归属不能为空", trigger: "blur" }],
        orderCostType: [
          { required: true, message: "成本类型不能为空", trigger: "blur" },
        ],
        // dname: [
        //   { required: true, message: "归属部门不能为空", trigger: "blur" },
        // ],
        userid: [
          { required: true, message: "项目经理不能为空", trigger: "blur" },
        ],
        wtrmanagerid: [
          { required: true, message: "考勤审批员不能为空", trigger: "blur" },
        ],
        address: [
          { required: true, message: "归属地区不能为空", trigger: "blur" },
        ],
        ordercode: [
          { required: true, message: "请填写订单号", trigger: "blur" },
          {
            pattern: /[a-zA-Z0-9]+/,
            message: "请填写字母或数字组成的订单号",
            trigger: "blur",
          },
        ],
        ordername: [
          { required: true, message: "订单名称不能为空", trigger: "blur" },
          {
            pattern: /^.{1,255}$/,
            message: "订单名称不能超过255个字符",
            trigger: "blur",
          },
        ],
        ordertype: [
          { required: true, message: "订单类型不能为空", trigger: "blur" },
        ],
        orderproportion: [
          { required: true, message: "订单比例不能为空", trigger: "blur" },
          {
            pattern: /^((?!0)\d{1,2}|100)$/,
            message: "不能填写超过100的正整数或普通字符",
            trigger: "blur",
          },
        ],
        salestarget: [
          { required: true, message: "产值目标不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{1,16}([.][0-9]{1,2})?$/,
            message: "请填写不超过16位数字并且不能输入普通字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    // this.form.ordercode = this.getProjectNum() + Math.floor(Math.random() * 10000)
    this.getDicts("sys_order_type").then((response) => {
      this.orderOptions = response.data;
    });
    this.getDicts("sys_order_cost").then((response) => {
      this.costOptions = response.data;
    });
    this.getDicts("sys_order_address").then((response) => {
      this.addressOptions = response.data;
    });
  },
  methods: {
    // 通过日期生成订单号
    getProjectNum() {
      const projectTime = new Date(); // 当前中国标准时间
      const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1; // 获取中国区月份
      const Day = projectTime.getDate(); // 获取几号
      var CurrentDate = Year;
      if (Month >= 10) {
        // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month;
      } else {
        CurrentDate += "0" + Month;
      }
      if (Day >= 10) {
        CurrentDate += Day;
      } else {
        CurrentDate += "0" + Day;
      }
      return CurrentDate;
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      listDept(this.queryParams).then((response) => {
        this.dnameOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.orderOptions, row.orderType);
    },
    costFormat(row, column) {
      return this.selectDictLabel(this.costOptions, row.orderCostType);
    },
    addressFormat(row, column) {
      return this.selectDictLabel(this.addressOptions, row.address);
    },
    // 表单重置
    reset() {
      this.form = {
        orderid: null,
        orderyear: null,
        ordercode: null,
        ordername: null,
        did: null,
        dname: null,
        deptName: null,
        userid: null,
        employeeId: null,
        userid2: null,
        ordertype: null,
        ordersdate: null,
        orderedate: null,
        orderdate: null,
        corpid: null,
        orderstate: null,
        address: null,
        orderCostType: null,
        orderproportion: null,
        salestarget: null,
        businesstype: null,
        customer: null,
        isActive: null,
        wtrmanager: null,
        wtrmanagerid: null,
        orderType: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.did = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.orderid);
      this.names = selection.map((item) => item.ordername);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      addEmployee().then((response) => {
        this.usernameOptions = response.data;
        this.wtrOptions = response.data;
        this.open = true;
        this.title = "添加订单";
      });
      listDept().then((response) => {
        this.dnameOptions = response.data;
        this.open = true;
        this.title = "添加订单";
      });
      getOrderCode().then((response) => {
        this.form.ordercode = response.msg;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderid = row.orderid || this.ids;
      getOrder(orderid).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改订单";
      });
      addEmployee().then((response) => {
        this.usernameOptions = response.data;
        this.wtrOptions = response.data;
        this.open = true;
        this.title = "修改订单";
      });
      listDept().then((response) => {
        this.dnameOptions = response.data;
        this.open = true;
        this.title = "修改订单";
      });
      getOrder(orderid).then((response) => {
        this.form = response.data;
        this.form.userid = Number(response.data.userid);
        this.form.did = Number(response.data.did);
        this.form.wtrmanagerid = Number(response.data.wtrmanagerid);
        this.open = true;
        this.title = "修改订单";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isDisable = true;
          if (this.form.orderid != undefined) {
            updateOrder(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                setTimeout(() => {
                  this.isDisable = false;
                }, 1000);
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
                this.isDisable = false;
              }
            });
          } else {
            addOrder(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                setTimeout(() => {
                  this.isDisable = false;
                }, 1000);
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
                this.isDisable = false;
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let params = {};
      if (row.bubbles) {
        params = this.names;
      } else {
        params = row.ordername;
      }
      const orderids = row.orderid || this.ids;
      this.$confirm('是否确认删除订单编号为"' + params + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delOrder(orderids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(function () {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportOrder(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        })
        .catch(function () {});
    },
  },
};
</script>
